<!--
 * Copyright © 2023
 * @Author: zhangxiang
 * @Date: 2023-06-15 09:44:55
 * @LastEditors: zhangxiang
 * @LastEditTime: 2023-06-15 15:20:07
 * @Description:
 *
-->

<template>
  <div class="sys-performance-ctn">
    <div class="top">
      <img
        class="bg"
        src="@/assets/imgs/self-intelligence-ops/bg_sys_performance.png"
      />
      <img
        :style="{ transform: pointerTransform }"
        class="pointer"
        src="@/assets/imgs/self-intelligence-ops/img_pointer.png"
      />
    </div>
    <div class="texts">
      <div class="percent start">0</div>
      <div class="percent end">100</div>
      <div class="performance">{{ performance }}</div>
      <div class="text">系统表现</div>
    </div>
  </div>
</template>

<script>
import { getHealthPerformance } from '@/api/cnap/self-intelligence-ops'
export default {
  name: 'SysPerformance',
  components: {},
  data() {
    return {
      performance: '低危' // 健康 低危 中危 高危
    }
  },
  computed: {
    /**
     * @description: 指针 旋转角度
     * @return {*}
     */
    pointerTransform() {
      if (this.performance === '高危') {
        return 'translateX(-50%) rotate(-77deg)'
      } else if (this.performance === '中危') {
        return 'translateX(-50%) rotate(-33deg)'
      } else if (this.performance === '低危') {
        return 'translateX(-50%) rotate(33deg)'
      } else {
        return 'translateX(-50%) rotate(77deg)'
      }
    }
  },
  created() {
    this.initData()
  },
  methods: {
    /**
     * @description: 初始化数据
     * @return {*}
     */
    initData() {
      getHealthPerformance().then((res) => {
        this.performance = res.data
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
.sys-performance-ctn {
  width: 100%;

  .top {
    position: relative;
    .bg {
      width: 100%;
    }
    .pointer {
      position: absolute;
      left: 50%;
      transform-origin: 50% 65%;
      transform: translateX(-50%) rotate(0deg);
      bottom: 0;
      height: 2.8vw;
    }
  }
  .texts {
    position: relative;
    text-align: center;
    margin-top: -5px;
    padding-top: 8px;
    .percent {
      position: absolute;
      top: 0;
      left: 10%;
      .textStyle(14px, 500, #262626);
      line-height: 20px;
      &.end {
        left: unset;
        right: 10%;
      }
    }
    .performance {
      display: inline-block;
      .textStyle(36px, 600, #000000);
      line-height: 50px;
      position: relative;
      &::before {
        content: "";
        position: absolute;
        top: 21px;
        left: -20px;
        border-radius: 50%;
        width: 8px;
        height: 8px;
        background: #0091ff;
      }
      &::after {
        content: "";
        position: absolute;
        top: 21px;
        right: -20px;
        border-radius: 50%;
        width: 8px;
        height: 8px;
        background: #0091ff;
      }
    }
    .text {
      .textStyle(16px, 400, #C3C3C3);
      line-height: 22px;
    }
  }
}
</style>
